<template>
  <view class="status-popup" v-if="visible">
    <view class="popup-mask" @tap="cancel"></view>
    <view class="popup-content">
      <view class="status-header">
        <text>{{ title }}</text>
        <view class="close-btn" @tap="cancel">
          <uni-icons type="closeempty" size="20" color="#999"></uni-icons>
        </view>
      </view>
      <view class="status-options">
        <view 
          class="status-option" 
          v-for="(option, index) in options" 
          :key="index"
          @tap="selectOption(option)"
        >
          <view class="status-radio" :class="{ selected: modelValue === option }">
            <view class="radio-inner" v-if="modelValue === option"></view>
          </view>
          <text class="status-text">{{ option }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: '请选择'
  },
  options: {
    type: Array,
    default: () => []
  },
  modelValue: {
    type: String,
    default: ''
  }
});

const emit = defineEmits(['update:visible', 'update:modelValue', 'confirm', 'cancel']);

// 选择选项
const selectOption = (option) => {
  emit('update:modelValue', option);
  emit('confirm', option);
  emit('update:visible', false);
};

// 取消选择
const cancel = () => {
  emit('cancel');
  emit('update:visible', false);
};
</script>

<style lang="scss" scoped>
.status-popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
}

.popup-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

.popup-content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  border-radius: 20rpx 20rpx 0 0;
  overflow: hidden;
  max-height: 70vh;
}

.status-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30rpx;
  position: relative;
  border-bottom: 1px solid #f0f0f0;
  font-size: 32rpx;
  font-weight: 500;
}

.close-btn {
  position: absolute;
  right: 30rpx;
  top: 30rpx;
}

.status-options {
  padding: 20rpx 0;
  max-height: calc(70vh - 90rpx);
  overflow-y: auto;
}

.status-option {
  display: flex;
  align-items: center;
  padding: 30rpx;
}

.status-radio {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  border: 2rpx solid #ddd;
  margin-right: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.status-radio.selected {
  border-color: #007AFF;
}

.radio-inner {
  width: 24rpx;
  height: 24rpx;
  border-radius: 50%;
  background-color: #007AFF;
}

.status-text {
  font-size: 30rpx;
  color: #333;
}
</style>